import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:myflutterproject/utils/overScrollBehavior.dart';
/*
* 在水平方向控件中，例如Row
MainAxisAlignment是水平的，默认起始位置在左边，排列方向为从左至右，此时可以通过textDirection来改变MainAxisAlignment的起始位置和排列方向
CrossAxisAlignment是垂直的，默认起始位置在中间，排列方向为从上至下，此时可以通过verticalDirection来改变CrossAxisAlignment的起始位置及排列方向

*在垂直方向的控件中，例如Column
MainAxisAlignment是垂直的，默认起始位置在上边，排列方向为从上至下，此时可以通过verticalDirection来改变MainAxisAlignment的起始位置及排列方向
CrossAxisAlignment是水平的，默认起始位置在中间，此时可以通过textDirection来改变CrossAxisAlignment的起始位置
* */
class ColumnDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Column'),
        centerTitle: true,
      ),
      body: Center(
        child: ScrollConfiguration(
          behavior: OverScrollBehavior(),
          child: ListView(
            children: <Widget>[
              Text('Column  center+CrossAxisAlignment.center'),
              Column1(),
              Text('Column  center+CrossAxisAlignment.start'),
              Column2(),
              Text('Column  center+CrossAxisAlignment.end'),
              Column3(),
            ],
          ),
        ),
      ),
    );
  }
}

//center + center
class Column1 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Container(
          width: 100,
          height: 60,
          color: Colors.pink,
          child: Text('aaa'),
        ),
        Container(
          width: 120,
          height: 60,
          color: Colors.yellow,
          child: Text('bbb'),
        ),
        Container(
          width: 100,
          height: 60,
          color: Colors.blue,
          child: Text('ccc'),
        ),
      ],
    );
  }

}

//center + start
class Column2 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          width: 100,
          height: 60,
          color: Colors.pink,
          child: Text('aaa'),
        ),
        Container(
          width: 120,
          height: 60,
          color: Colors.yellow,
          child: Text('bbb'),
        ),
        Container(
          width: 100,
          height: 60,
          color: Colors.blue,
          child: Text('ccc'),
        ),
      ],
    );
  }

}

//center + end
class Column3 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: <Widget>[
        Container(
          width: 100,
          height: 60,
          color: Colors.pink,
          child: Text('aaa'),
        ),
        Container(
          width: 120,
          height: 60,
          color: Colors.yellow,
          child: Text('bbb'),
        ),
        Container(
          width: 100,
          height: 60,
          color: Colors.blue,
          child: Text('ccc'),
        ),
      ],
    );
  }

}